<script setup lang="ts">
import {
  ElCheckbox,
  ElCol,
  ElDivider,
  ElDrawer,
  ElOption,
  ElRow,
  ElSelect,
  ElSlider,
} from "element-plus";
import { computed, ref, watch } from "vue";

const props = defineProps<{
  columns: any[];
}>();

const hiddenColumns = defineModel<Map<string, any>>("hiddenMap");

watch(
  () => props.columns,
  (list) => {
    list?.forEach((item) => {
      hiddenColumns.value?.set(
        item,
        hiddenColumns.value?.get(item) || item.hidden
      );
    });
  },
  {
    immediate: true,
  }
);
// <--- E

const step = ref(1);
const span = computed(() => 24 / step.value);
const width = computed(() => 360 + step.value * 100);
</script>

<template>
  <ElDrawer title="" :size="width">
    <template #header>
      <div class="flex items-center justify-bewteen">
        <div class="flex-auto text-lg">表列显示隐藏设置</div>

        <div class="flex-none w-[100px] mr-3" >
          <ElSelect class="flex-none" v-model="step">
            <ElOption v-for="i in 4" :key="i" :label="i + '列'" :value="i" />
          </ElSelect>
        </div>
      </div>
    </template>

    <ElRow>
      <ElCol v-for="(item, index) in columns" :key="index" :span="span">
        <ElCheckbox
          :label="item.label"
          :modelValue="!hiddenColumns?.get(item)"
          @change="hiddenColumns?.set(item, !hiddenColumns.get(item))"
        />
      </ElCol>
    </ElRow>
  </ElDrawer>
</template>
